<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8" />
		<meta charset="{CHARSET}">
		<title></title>
	</head>
          <style type="text/css">
          	#bj{ background-color:blue;
          	     position: absolute;
          	     z-index: 1;
          	}
          	#2{
          		position:absolute;
          		z-index: 2;
          	}
          </style>   
	<body>
		<!--占比条需要实现的功能是在一组比较性数据中按照背景色的长短显示数据比较出来的结果-->
		<!--步骤；1.先建立表格，-->
		<table border="2px solid">
			<caption>各城市房价比较</caption>
			<tr>
				<th style="align-content: center;width: 600px;">城市名称</th>
				<th>房价</th>
			</tr>
			<tr>
				<td>
					<div id="bj">
					<p></p>	
					</div>
					<div id="2">
						北京
					</div>
					
				</td>
				<td>50000</td>
			</tr>
			<tr>
				<td>
					<div id=sh ">
					</div>
					<div id="2 ">
						上海
					</div>
				</td>
				<td>40000</td>
			</tr>
			<tr>
				<td>
					<div id="hz">

					</div>
					<div id="2 ">
						杭州
					</div>
				</td>
				<td>30000</td>
			</tr>
			<tr>
				<td>
					<div id="sz">
					</div>
					<div id="2 ">
						苏州
					</div>
				</td>
				<td>24000</td>
			</tr>
			<tr>
				<td>
					<div id="yw">
					</div>
					<div id="2 ">
						义乌
					</div>
				</td>
				<td>18500</td>
			</tr>
			<tr>
				<td>
					<div id="wlmq">
					</div>
					<div id="2 ">
						乌鲁木齐
					</div>
				</td>
				<td>16000</td>
			</tr>
		</table>
		<!--步骤2；现在给城市名称的每一个列添加一个层作为背景色，颜色选择为天蓝-->
	</body>

</html>